<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>腾讯地图开放API - 轻快小巧,简单易用!</title>
    <link rel="stylesheet" href="https://lbs.qq.com/tool/getpoint/common.css">
    <script src="https://lbs.qq.com/tool/getpoint/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="https://lbs.qq.com/tool/getpoint/jquery-ui.min.css">
    <script src="https://lbs.qq.com/tool/getpoint/jquery-ui-1.10.4.min.js"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key={$wxmap_key}"></script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        .map{
            position:relative;
            width: 535px;
        }
        .map .poi {
            padding: 10px;
            float: left;
            position: relative;
        }
        .map .poi .note {
            line-height: 26px;
            float: left;
        }
        #poi_cur {
            width: 150px;
            height: 22px;
            margin-right: 10px;
            /*margin-top: 3px;*/
            line-height: 26px;
            float: left;
            text-align: center;
        }

        #addr_cur {
            width: 220px;
            height: 22px;
            margin-right: 5px;
            /*margin-top: 3px;*/
            line-height: 26px;
            float: left;
            text-align: center;
        }
        #main {
            height: 400px;
            width: 99.5%;
            border: 1px solid #5688CB;
            border-top: 0px;
        }
        #tooles {
            height: 23px;
            background: #5688CB;
            position: relative;
            z-index: 100;
            color: white;
        }
        #cur_city{
            /*height: 20px;*/
            position: absolute;
            top: 3px;
            left: 10px;
        }
        #level {
            margin-left: 20px;
        }
        #bside_rgiht {
            width: 100%;
            height: 100%;
            font-size: 12px;
        }

        #container {
            width: 100%;
            height: 94%;
        }
    </style>

</head>
<body>
<div class="map">
    <div style="height:40px;">
        <div class="poi">
            <div class="note">当前坐标：</div>
            <input type="text" id="poi_cur"/>
            <div class="note">当前地址：</div>
            <input type="text" id="addr_cur"/>
        </div>
    </div>
    <div id="main">
        <div id="tooles">
            <div id="cur_city">
                <strong>{$location['ad_info']['district']?:$location['ad_info']['city']}</strong>
                <span id="level">当前缩放等级：15</span>
            </div>
        </div>
        
        <div id="bside_rgiht">
            <div id="container"></div>
        </div>
        
    </div>
    
</div>
<script type="text/javascript">

    var container = document.getElementById("container");
    var map = new qq.maps.Map(container, {
            center: new qq.maps.LatLng(<?= $location['location']['lat']?>,<?= $location['location']['lng']?>),
            zoom: 15
        }),
        label = new qq.maps.Label({
            map: map,
            offset: new qq.maps.Size(15, -12),
            draggable: false,
            clickable: false
        }),
        markerArray = [],
        url, query_city,
        cityservice = new qq.maps.CityService({
            complete: function (result) {
                curCity.children[0].innerHTML = result.detail.name;
                map.setCenter(result.detail.latLng);
            }
        });
    cityservice.searchLocalCity();
    map.setOptions({
        draggableCursor: "crosshair"
    });

    $(container).mouseenter(function () {
        label.setMap(map);
    });
    $(container).mouseleave(function () {
        label.setMap(null);
    });

    qq.maps.event.addListener(map, "mousemove", function (e) {
        var latlng = e.latLng;
        label.setPosition(latlng);
        label.setContent(latlng.getLat().toFixed(6) + "," + latlng.getLng().toFixed(6));
    });

    var url3;
    qq.maps.event.addListener(map, "click", function (e) {

        // 设置坐标
        var coordinate = e.latLng.getLat().toFixed(6) + "," + e.latLng.getLng().toFixed(6);
        document.getElementById("poi_cur").value = coordinate;
        parent.setCoordinate(coordinate);

        url3 = encodeURI("https://apis.map.qq.com/ws/geocoder/v1/?location=" + e.latLng.getLat() + "," + e.latLng.getLng() + "&key={$wxmap_key}&output=jsonp&&callback=?");
        $.getJSON(url3, function (result) {
            if (result.result != undefined) {
                document.getElementById("addr_cur").value = result.result.address;
            } else {
                document.getElementById("addr_cur").value = "";
            }
        })
    });

    qq.maps.event.addListener(map, "zoom_changed", function () {
        document.getElementById("level").innerHTML = "当前缩放等级：" + map.getZoom();
    });
    var listener_arr = [];
    var isNoValue = false;
    qq.maps.event.addDomListener(btnSearch, 'click', function () {
        var value = this.parentNode.getElementsByTagName("input")[0].value;
        var latlngBounds = new qq.maps.LatLngBounds();
        for (var i = 0, l = listener_arr.length; i < l; i++) {
            qq.maps.event.removeListener(listener_arr[i]);
        }
        listener_arr.length = 0;
        query_city = curCity.children[0].innerHTML;
        url = encodeURI("https://apis.map.qq.com/ws/place/v1/search?keyword=" + value + "&boundary=region(" + query_city + ",0)&page_size=9&page_index=1&key={$wxmap_key}&output=jsonp&&callback=?");
        $.getJSON(url, function (result) {

            if (result.count) {
                isNoValue = false;
                bside.innerHTML = "";
                each(markerArray, function (n, ele) {
                    ele.setMap(null);
                });
                markerArray.length = 0;
                each(result.data, function (n, ele) {
                    var latlng = new qq.maps.LatLng(ele.location.lat, ele.location.lng);
                    latlngBounds.extend(latlng);
                    var left = n * 27;
                    var marker = new qq.maps.Marker({
                        map: map,
                        position: latlng,
                        zIndex: 10
                    });
                    marker.index = n;
                    marker.isClicked = false;
                    setAnchor(marker, true);
                    markerArray.push(marker);
                    var listener1 = qq.maps.event.addDomListener(marker, "mouseover", function () {
                        var n = this.index;
                        setCurrent(markerArray, n, false);
                        setCurrent(markerArray, n, true);
                        label.setContent(this.position.getLat().toFixed(6) + "," + this.position.getLng().toFixed(6));
                        label.setPosition(this.position);
                        label.setOptions({
                            offset: new qq.maps.Size(15, -20)
                        })

                    });
                    listener_arr.push(listener1);
                    var listener2 = qq.maps.event.addDomListener(marker, "mouseout", function () {
                        var n = this.index;
                        setCurrent(markerArray, n, false);
                        setCurrent(markerArray, n, true);
                        label.setOptions({
                            offset: new qq.maps.Size(15, -12)
                        })
                    });
                    listener_arr.push(listener2);
                    var listener3 = qq.maps.event.addDomListener(marker, "click", function () {
                        var n = this.index;
                        setFlagClicked(markerArray, n);
                        setCurrent(markerArray, n, false);
                        setCurrent(markerArray, n, true);
                        document.getElementById("addr_cur").value = bside.childNodes[n].childNodes[1].childNodes[1].innerHTML.substring(3);
                    });
                    listener_arr.push(listener3);
                    map.fitBounds(latlngBounds);
                    var div = document.createElement("div");
                    div.className = "info_list";
                    var order = document.createElement("div");
                    var leftn = -54 - 17 * n;
                    order.style.cssText = "width:17px;height:17px;margin:3px 3px 0px 0px;float:left;background:url(./img/marker_n.png) " + leftn + "px 0px";
                    div.appendChild(order);
                    var pannel = document.createElement("div");
                    pannel.style.cssText = "width:200px;float:left;";
                    div.appendChild(pannel);
                    var name = document.createElement("p");
                    name.style.cssText = "margin:0px;color:#0000CC";
                    name.innerHTML = ele.title;
                    pannel.appendChild(name);
                    var address = document.createElement("p");
                    address.style.cssText = "margin:0px;";
                    address.innerHTML = "地址：" + ele.address;
                    pannel.appendChild(address);
                    if (ele.tel != undefined) {
                        var phone = document.createElement("p");
                        phone.style.cssText = "margin:0px;";
                        phone.innerHTML = "电话：" + ele.tel;
                        pannel.appendChild(phone);
                    }
                    var position = document.createElement("p");
                    position.style.cssText = "margin:0px;";
                    position.innerHTML = "坐标：" + ele.location.lat.toFixed(6) + "，" + ele.location.lng.toFixed(6);
                    pannel.appendChild(position);
                    bside.appendChild(div);
                    console.log("pannel.offsetHeight", pannel.offsetHeight)
                    div.style.height = pannel.offsetHeight + "px";
                    div.isClicked = false;
                    div.index = n;
                    marker.div = div;
                    div.marker = marker;
                });
            } else {

                bside.innerHTML = "";
                each(markerArray, function (n, ele) {
                    ele.setMap(null);
                });
                markerArray.length = 0;
                var novalue = document.createElement('div');
                novalue.id = "no_value";
                novalue.innerHTML = "对不起，没有搜索到您要找的结果!";
                bside.appendChild(novalue);
                isNoValue = true;
            }
        });
    });

    btnSearch.onmousedown = function () {
        this.className = "btn_active";
    };
    btnSearch.onmouseup = function () {
        this.className = "btn";
    };

    function setAnchor(marker, flag) {
        var left = marker.index * 27;
        if (flag == true) {
            var anchor = new qq.maps.Point(10, 30),
                origin = new qq.maps.Point(left, 0),
                size = new qq.maps.Size(27, 33),
                icon = new qq.maps.MarkerImage("./img/marker10.png", size, origin, anchor);
            marker.setIcon(icon);
        } else {
            var anchor = new qq.maps.Point(10, 30),
                origin = new qq.maps.Point(left, 35),
                size = new qq.maps.Size(27, 33),
                icon = new qq.maps.MarkerImage("./img/marker10.png", size, origin, anchor);
            marker.setIcon(icon);
        }
    }

    function setCurrent(arr, index, isMarker) {
        if (isMarker) {
            each(markerArray, function (n, ele) {
                if (n == index) {
                    setAnchor(ele, false);
                    ele.setZIndex(10);
                } else {
                    if (!ele.isClicked) {
                        setAnchor(ele, true);
                        ele.setZIndex(9);
                    }
                }
            });
        } else {
            each(markerArray, function (n, ele) {
                if (n == index) {
                    ele.div.style.background = "#DBE4F2";
                } else {
                    if (!ele.div.isClicked) {
                        ele.div.style.background = "#fff";
                    }
                }
            });
        }
    }

    function setFlagClicked(arr, index) {
        each(markerArray, function (n, ele) {
            if (n == index) {
                ele.isClicked = true;
                ele.div.isClicked = true;
                var str = '<div style="width:250px;">' + ele.div.children[1].innerHTML.toString() + '</div>';
                var latLng = ele.getPosition();

                // 设置坐标
                var coordinate = latLng.getLat().toFixed(6) + "," + latLng.getLng().toFixed(6);
                document.getElementById("poi_cur").value = coordinate;
                parent.setCoordinate(coordinate);

            } else {
                ele.isClicked = false;
                ele.div.isClicked = false;
            }
        });
    }
    
    function each(obj, fn) {
        for (var n = 0, l = obj.length; n < l; n++) {
            fn.call(obj[n], n, obj[n]);
        }
    }
</script>
</body>
</html>
